<template>
  <div>
    <div class="collect">
      <div class="collect-list">
        <div class="list-item">
          <div class="item-left">
            <img
              src="https://img.alicdn.com/bao/uploaded/i4/2756789804/O1CN01jIeljR2MIHqLdjQQE_!!2756789804.jpg_160x160xz.jpg"
              alt=""
            />
            <div class="left-detail">
              <span>商品名称: 有机长白山正品袍子粉</span>
              <span>商品描述: 生态园参茸长白山</span>
              <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格: 55 元</span>
            </div>
          </div>
          <div class="item-right">
            <button>查看详情</button>
            <button>删除收藏</button>
          </div>
        </div>
        <div class="list-item">
          <div class="item-left">
            <img
              src="https://img.alicdn.com/bao/uploaded/i4/2756789804/O1CN01jIeljR2MIHqLdjQQE_!!2756789804.jpg_160x160xz.jpg"
              alt=""
            />
            <div class="left-detail">
              <span>商品名称: 有机长白山正品袍子粉</span>
              <span>商品描述: 生态园参茸长白山</span>
              <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格: 55 元</span>
            </div>
          </div>
          <div class="item-right">
            <button>查看详情</button>
            <button>删除收藏</button>
          </div>
        </div>
        <div class="list-item">
          <div class="item-left">
            <img
              src="https://img.alicdn.com/bao/uploaded/i4/2756789804/O1CN01jIeljR2MIHqLdjQQE_!!2756789804.jpg_160x160xz.jpg"
              alt=""
            />
            <div class="left-detail">
              <span>商品名称: 有机长白山正品袍子粉</span>
              <span>商品描述: 生态园参茸长白山</span>
              <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格: 55 元</span>
            </div>
          </div>
          <div class="item-right">
            <button>查看详情</button>
            <button>删除收藏</button>
          </div>
        </div>
        <div class="list-item">
          <div class="item-left">
            <img
              src="https://img.alicdn.com/bao/uploaded/i4/2756789804/O1CN01jIeljR2MIHqLdjQQE_!!2756789804.jpg_160x160xz.jpg"
              alt=""
            />
            <div class="left-detail">
              <span>商品名称: 有机长白山正品袍子粉</span>
              <span>商品描述: 生态园参茸长白山</span>
              <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格: 55 元</span>
            </div>
          </div>
          <div class="item-right">
            <button>查看详情</button>
            <button>删除收藏</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "SCollect",
};
</script>

<script lang="ts" setup>
</script>

<style lang="less" scoped>
.collect {
  .collect-list {
    width: 1200px;
    margin: 0 auto;
    .list-item {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid #e5e5e5;
      &:last-child {
        border: none;
      }
      .item-left {
        display: flex;
        .left-detail {
          display: flex;
          flex-direction: column;
          padding-left: 10px;
          font-size: 16px;
          line-height: 30px;
        }
      }
      .item-right {
        display: flex;
        align-items: center;
        button {
          padding: 10px;
          border-radius: 5px;
          border: none;
          color: #f4faff;
          font-size: 16px;
          cursor: pointer;
          &:first-child {
            margin-right: 20px;
            background-color: #409eff;
          }
          &:last-child {
            background-color: #f56c6c;
          }
        }
      }
    }
  }
}
</style>
